
<template>
  <div>
    {{ message }}
    {{ message2 ? '我是老大' : '我笑的' }}
    {{ message2 + 1 }}
    {{ message.split('').map(v => `4546$v`) }}
    <div v-text="message"></div>
    <div v-if="flag" v-html="message_html"></div>
    <div v-else>1231</div>
    <div v-show="flag" v-html="message_html"></div>


    <button v-on:click="clickTap">点击冒泡</button>
    <div @click="parent">父亲点击
      <button @click="clickTap">点击</button>
      <!--stop点击父标签不冒泡-->
    </div>

    <form action="/">
      <button type="submit">提交</button>
    </form>

    <form action="/">
      <button @click.prevent="clickTap" type="submit">提交</button>
    </form>
    <!--提交的时候页面不刷新-->
    <div v-bind:style="style">绑定style</div>
    <div :class="[flag ? 'a' : 'b']">绑定class</div>
    <div :class="cls">对象绑定class</div>

    <div v-for="item in Arr" :key="item">{{ item }}</div>
    <!--遍历数组-->
    <div v-for="item in Arr2" :key="item.name">{{ item.name }}=>{{ item.age }}</div>
    <input type="text" v-model="testmodel">
    <div>{{ testmodel }}</div>


  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
const message: string = '我是学生'
const message2: number = 11
const message_html: string = "<section>22222222</section>"
const flag: boolean = true
const clickTap = () => {
  console.log('点击')
}
const parent = () => {
  console.log('父亲点击')
}
type Style = {
  color: string,
  height: string
}
const style: Style = {
  color: 'blue',
  height: '30px'
}
type Cls = {
  a: boolean,
  b: boolean
}
const cls: Cls = {
  a: false,
  b: true
}

const Arr: Array<number> = [1, 2, 3, 4, 3, 5]
const Arr2: Array<any> = [{ name: 'tang', age: 1 }, { name: 'qiao', age: 11 }]


// const testmodel:string='test'
const testmodel = ref("test") // 需要响应式，不然没法及时响应

</script>


<style scoped>
.a {
  height: 40px;
  color: red;
}

.b {
  color: rgb(94, 255, 0);
  border: 1px solid #ccc;
}
</style>
